<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img :src="user.avatar_url">
						</view>
						<!-- <view class="phone-number">{{user.login}}</view> -->
					</view>
					<view class="box-bd">
						<view class="item" @tap="gotoBlog">
							<text class="item-text">{{blogs}}</text>
							<view class="text">博客</view>
						</view>
						<view class="item" @tap="gotoLable">
							<text class="item-text">{{label}}</text>
							<view class="text">标签</view>
						</view>
						<view class="item" @tap="gotoInspiration">
							<text class="item-text">{{inspiration}}</text>
							<view class="text">灵感</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder" @tap="gotoOther">
					<view class="icon"><image src="../../static/card.png"></image></view>
					<view class="text">我的名片</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="li "  @tap="gotoOther">
					<view class="icon"><image src="../../static/help.png"></image></view>
					<view class="text">帮助中心</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
				<view class="li "  @tap="gotoOther">
					<view class="icon"><image src="../../static/about.png"></image></view>
					<view class="text">关于我们</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
				<view class="li "  @tap="gotoOther">
					<view class="icon"><image src="../../static/opinion.png"></image></view>
					<view class="text">意见反馈</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="icon"><image src="../../static/set.png"></image></view>
					<view class="text">系统设置</view>
					<image class="to" src="../../static/to.png"></image>
				</view>
			</view>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.png" mode="aspectFit" style="width: 150upx;height: 150upx;"></image>
		</view>
	</view>
</template>
<script>
	import { queryArchivesCount,queryInspirationCount,queryAllLabel } from '../../utils/service.js'
	export default {
		data() {
			return {
				blogs:0,
				inspiration:0,
				label:0,
				loadModal:false,
				user:{}
			};
		},
		onReady() {
			this.getCount()
			this.getUserInfo()
		},
		methods: {
			async getCount(){
				this.loadModal = true
				this.blogs = await queryArchivesCount()
				let res = await queryAllLabel()
				this.label = res.length
				this.inspiration = await queryInspirationCount()
				this.loadModal = false
			},
			getUserInfo(){
				this.user = uni.getStorageSync("user")
			},
			gotoBlog(){
				uni.switchTab({
					url:'../collection/collection'
				})
			},
			gotoLable(){
				
			},
			gotoInspiration(){
				uni.switchTab({
					url:'../inspiration/inspiration'
				})
			},
			gotoOther(){
				uni.showToast({
					title:'功能正在开发中...',
					icon:'none',
					duration:2000
				})
			}

		}
	}
</script>

<style lang="scss">
page{
	background-color:#f1f1f1;
	font-size: 30upx;
}
.header{
	background: #fff;
	height: 490upx;
	padding-bottom: 110upx;
	.bg{
		width: 100%;
		height:300upx;
		padding-top:100upx;
		background: #2c2c2c;
	}
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	margin-top: 60upx;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.phone-number{
			width: 100%;
			text-align: center;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			font-size: 40upx;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				font-size: 34upx;
				text-align: center;
				margin-top: 10upx;
			}
			.item-text{
				font-weight: 600;				
				color: #0081FF;				
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
	}
}
</style>
